<template>
  <div class="homeworkWrapper">
    <div class="container">
      <div class="header">
        <div class="left">
          <div class="item">
            <el-button type="primary" :icon="Plus">新增</el-button>
          </div>
          <div class="item">
            <div class="name">班级：</div>
            <el-select v-model="value" placeholder="请选择班级" style="width: 140px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="item">
            <div class="name">科目：</div>
            <el-select v-model="value" placeholder="请选择科目" style="width: 140px">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="item">
            <div class="name">搜索：</div>
            <el-input placeholder="请输入关键字搜索" />
          </div>
        </div>
        <div class="right">

        </div>

      </div>
      <Loading :loading="loading" :height="'calc(100% - 48px)'">
        <div class="content">
          <div v-if="cardData > 0" class="cardBox" v-infinite-scroll="scrollLoad" infinite-scroll-distance="1">
            <Card
              v-for="i in cardData"
              :key="i"
              :onMouseover="onMouseover"
              :onMouseout="onMouseout"
            />
          </div>
          <Empty v-if="!cardData" description="暂无数据" />
        </div>
      </Loading>

    </div>

    <!-- 统一使用一个el-popover -->
    <el-popover
      ref="popoverRef"
      :virtual-ref="buttonRef"
      trigger="hover"
      title="With title"
      virtual-triggering
      popper-class="testeeeeee"
    >
      <span> Some content </span>
    </el-popover>
  </div>
</template>
<script lang="ts" setup>
import { Plus } from '@element-plus/icons-vue';
import { nextTick, ref,unref } from 'vue';

import Card from './components/card';
import Empty from 'components/empty';
import Loading from 'components/loading';


const options = [
  {
    value: '1',
    label: '高三1班',
  },
  {
    value: '2',
    label: '高三2班',
  },
  {
    value: '3',
    label: '高三3班',
  },
  {
    value: '4',
    label: '高三4班',
  }
];

const cardData = ref(20);
const value = ref('1');
const loading = ref(true);

const popoverRef = ref()
const buttonRef = ref()
const visible = ref(false)


const onMouseover = (e:any) => {
  // console.log(e)
  buttonRef.value = e.target;
  unref(popoverRef).popperRef?.delayHide?.()
  if(!buttonRef.value){
    buttonRef.value = e.target;
    // visible.value = true
    unref(popoverRef).popperRef?.delayHide?.()
  }
}

// 鼠标移出查看更多
const onMouseout = (e:Element) => {
  // console.log(e)
  // buttonRef.value = null;
  // visible.value = false;
}

// 滚动加载
const scrollLoad = () => {
  if(loading.value) return;
  console.log('scroll')
  cardData.value += 10;
}

setTimeout(() => {
  loading.value = false;
}, 1000);
</script>
<style lang="scss" scoped>
@use "./homework-manage.scss";
</style>
